<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>月下仙连 - 个人作品</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/offering.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="js/darkmode.js"></script>
    <script src="js/dailyLife.js"></script>
</head>
<body>
<!-- 导航 -->
<header class="header">
    <div class="logo">
        <h3>月下仙连的个人网页</h3>
    </div>
    <nav class="nav">
        <a href="index.html"><i class="fas fa-home"></i> 首页</a>
        <a href="about.html"><i class="fas fa-user"></i> 个人介绍</a>
        <a class="active" href="offering.html"><i class="fas fa-briefcase"></i> 个人作品</a>
        <a href="dailyLife.html"><i class="fas fa-camera"></i> 日常生活</a>
        <a href="contactMe.html"><i class="fas fa-envelope"></i> 联系我</a>
        <button class="mode-toggle" onclick="toggleDarkMode()">
            <i class="fas fa-moon"></i>
        </button>

        </button>
    </nav>
</header>

<!-- 内容区域 -->

    <main class="about">
        <h3 class="about-title"><i class="fas fa-briefcase"></i> 个人作品</h3>
        <!-- 这里可以添加作品内容 -->
        <!-- 在 .about 主体内容中添加如下代码 -->
        <section class="about-section">
            <h3 class="about-title"><i class="fas fa-video"></i> B站作品</h3>
            <div class="bilibili-cards">
                <!-- 示例卡片 1 -->
                <div class="bilibili-card">
                    <a href="https://www.bilibili.com/video/BV1JhR5YnEDV/?spm_id_from=333.1387.homepage.video_card.click&vd_source=e3c3d0ae54ef108b1f02db3b5dc2f1a3"
                       target="_blank">
                        <img alt="B站视频封面" src="img/offering1.png">
                        <div class="bilibili-card-info">
                            <h4>【华附/寒宣】从这里出发，再次踏入熟悉的校园</h4>
                            <p>播放量：136 | 点赞数：10</p>
                        </div>
                    </a>
                </div>

                <!-- 示例卡片 2 -->
                <div class="bilibili-card">
                    <a href="https://www.bilibili.com/video/BV114FSeBExj/?spm_id_from=333.1387.homepage.video_card.click&vd_source=e3c3d0ae54ef108b1f02db3b5dc2f1a3"
                       target="_blank">
                        <img alt="B站视频封面" src="img/offering2.png">
                        <div class="bilibili-card-info">
                            <h4>【CS/朋友】你们也有能一起快乐打CS的兄弟嘛</h4>
                            <p>播放量：180 | 点赞数：12</p>
                        </div>
                    </a>
                </div>

                <!-- 示例卡片 3 -->
                <div class="bilibili-card">
                    <a href="https://www.bilibili.com/video/BV1zB4y187eg/?spm_id_from=333.1387.homepage.video_card.click&vd_source=e3c3d0ae54ef108b1f02db3b5dc2f1a3"
                       target="_blank">
                        <img alt="B站视频封面" src="img/offering3.png">
                        <div class="bilibili-card-info">
                            <h4>【第五】这游戏还能摸出枪的？</h4>
                            <p>播放量：80.8万 | 点赞数：1.0万</p>
                        </div>
                    </a>
                </div>

                <!-- 示例卡片 4 -->
                <div class="bilibili-card">
                    <a href="https://www.bilibili.com/video/BV1oU4y1q7UK/?spm_id_from=333.1387.homepage.video_card.click&vd_source=e3c3d0ae54ef108b1f02db3b5dc2f1a3"
                       target="_blank">
                        <img alt="B站视频封面" src="img/offering4.png">
                        <div class="bilibili-card-info">
                            <h4>【第五】小学生打第五有多好笑？</h4>
                            <p>播放量：26.5万 | 点赞数：9453</p>
                        </div>
                    </a>
                </div>

                <!-- 可继续添加更多卡片 -->
            </div>
        </section>
    </main>


<!-- 底部 -->
<footer class="footer">
    <p>Copyright © 2020-
        <script>document.write(new Date().getFullYear())</script>
        月下仙连. All rights reserved.
    </p>
</footer>

</body>
</html>
